﻿<ul class="nav nav-pills">
	<li role="presentation" class="active"><a href="#tabs-1" aria-controls="tabs-1" role="tab" data-toggle="tab"><span id="span_supervision_tab1"> </span></a></li>
	<li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" role="tab" data-toggle="tab"><span id="span_supervision_tab2"> </span></a></li>
	<li role="presentation"><a href="#tabs-3" aria-controls="tabs-3" role="tab" data-toggle="tab"><span id="span_supervision_tab3"> </span></a></li>
	<li role="presentation"><a href="#tabs-4" aria-controls="tabs-4" role="tab" data-toggle="tab"><span id="span_supervision_tab4"> </span></a></li>
	<li role="presentation"><a href="#tabs-5" aria-controls="tabs-5" role="tab" data-toggle="tab"><span id="span_supervision_tab5"> </span></a></li>
	<li role="presentation"><a href="#tabs-6" aria-controls="tabs-6" role="tab" data-toggle="tab"><span id="span_supervision_tab6"> </span></a></li>
	<li role="presentation"><a href="#tabs-7" aria-controls="tabs-7" role="tab" data-toggle="tab"><span id="span_supervision_tab7"> </span></a></li>
	<li role="presentation"><a href="#tabs-8" aria-controls="tabs-8" role="tab" data-toggle="tab"><span id="span_supervision_tab8"> </span></a></li>
	<li role="presentation"><a href="#tabs-9" aria-controls="tabs-9" role="tab" data-toggle="tab"><span id="span_supervision_tab9"> </span></a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content" style="margin-top: 5px;">
	   <a href="javascript:WebSocketTest()" class="btn btn-warning">
	       <span class="glyphicon glyphicon-link"></span> 
	       <span id="span_SV_connect"></span>
	   </a>
	<span id="connected"></span>
	<!-- Digital Input -->
	<div id="tabs-1" class="tab-pane active">
		<div id="template_tabs1" style="display:none">
			<div class="form-inline">
				<div class="form-group">
					<label class="radio-inline">
						<input type="radio" name="e#pin_number#" value="0" id="in_dig_#pin_number#" onclick="clicked(this.id);" checked="checked"/>
						<span id="span_supervision_disabled_e#pin_number#"> </span>
					</label>
					<label class="radio-inline">
						<input type="radio" name="e#pin_number#" value="1" id="out_dig_#pin_number#" onclick="clicked(this.id);">
						<span id="span_supervision_enabled_e#pin_number#"> </span>
					</label>
					<label><span id="span_supervision_pin_e#pin_number#"> </span> #pin_number# :</label>
					<input id="ip#pin_number#" name="pin" class="form-control" type="text" value="0" size="1"/>
				</div>
				<div class="form-group">
					<label>Data Latch</label>
					<select id="dlatch#pin_number#" class="form-control" onchange="digitalLatch('#pin_number#', (this.id));">
						<option value="1">No Latch Set</option>
						<option value="2">Latch High</option>
						<option value="3">Latch Low</option>
					</select>
				</div>
				<div class="form-group">
					<label>Latch Event Occurred On :</label>
					<input id="dlevent#pin_number#" name="pin" class="form-control" type="text" maxlength="255" value="">
				</div>
			</div>
		</div>
	</div>
	<!-- Digital Output -->
	<div id="tabs-2" class="tab-pane">
		<div id="template_tabs2" style="display:none">
			<div class="form-inline">
				<div class="form-group">
					<label><span id="span_supervision_pin_s#pin_number#"> </span> #pin_number# :</label>
					<label class="radio-inline">
						<input type="radio" name="p#pin_number#_tab2" value="0" id="low_#pin_number#" onclick="clicked(this.id);" checked="checked">
						<span id="span_supervision_low_s#pin_number#"> </span>
					</label>
					<label class="radio-inline">
						<input type="radio" name="p#pin_number#_tab2" value="1" id="high_#pin_number#" onclick="clicked(this.id);">
						<span id="span_supervision_high_s#pin_number#"> </span>
					</label>
					#pwm_line#
				</div>
			</div>
		</div>
		<div id="template_tabs2_pwm" style="display:none">
			<label class="checkbox-inline">
				<input type="checkbox" name="p#pin_number#_tab2_pwm" value="2" onclick="clicked(this.id);" id="pwm_#pin_number#"><span id="span_supervision_PWM"> </span>
			</label>
			<input type="number" name="p#pin_number#_tab2_pwm" id="v#pin_number#" class="form-control" style="display:none" min="0" max="255" step="1" value="0" oninput="pwmChange(this.id);">
		</div>

	</div>
	<!-- Analog output -->
	<div id="tabs-3" class="tab-pane">
		<div id="template_tabs3" style="display:none">
			<div class="form-inline">
				<div class="form-group">
					<label class="radio-inline">
						<input type="radio" name="p#pin_number#_tab3" value="0" id="in_ana_#pin_number#" onclick="clicked(this.id);" checked="checked">
						<span id="span_supervision_disabled_e#pin_number#"> </span>
					</label>
					<label class="radio-inline">
						<input type="radio" name="p#pin_number#_tab3" value="1" id="out_ana_#pin_number#" onclick="clicked(this.id);">
						<span id="span_supervision_enabled_e#pin_number#"> </span>
					</label>
					<label><span id="span_supervision_pin_e#pin_number#"> </span> A#pin_number# :</label>
					<input id="ia#pin_number#" name="pin" class="form-control" type="text" value="0" size="1"/>
				</div>
				<div class="form-group">
					<label>Latch Threshold</label>
					<input id="a1thr#pin_number#" name="pin" class="form-control" type="text" maxlength="255" value="0" size="1"/>
				</div>
				<div class="form-group">
					<label>Data Latch</label>
					<select id="alatch#pin_number#" class="form-control" onchange="analogLatch('0', (this.id));">
						<option value="1">No Latch Set</option>
						<option value="2">==</option>
						<option value="3"><</option>
						<option value="4"><=</option>
						<option value="5">></option>
						<option value="6">>=</option>
					</select>
				</div>
				<div class="form-group">
					<label>Latch Event Occurred On :</label>
					<input id="alevent#pin_number#" name="pin" class="form-control" type="text" maxlength="255" value="">
				</div>
			</div>
		</div>
	</div>
	<!-- Reports -->
	<div id="tabs-4" class="tab-pane">
		<br/>
		<textarea id="reports" rows="10" cols="70"></textarea>
		<br/>
		<br/>
		<a href="javascript:getAnalogMap()" class="btn btn-info">
	       <span id="span_supervision_get_analog_map"></span>
	    </a>
		&nbsp
		<a href="javascript:getCapabilityReport()" class="btn btn-info">
	       <span id="span_supervision_get_capability"></span>
	    </a>
		<br/>
		<br/>
		<a href="javascript:getFirmwareVersion()" class="btn btn-info">
	       <span id="span_supervision_get_firmware"></span>
	    </a>
		&nbsp
		<a href="javascript:getProtocolVersion()" class="btn btn-info">
	       <span id="span_supervision_get_protocol"></span>
	    </a>
		&nbsp
		<a href="javascript:getPymataVersion()" class="btn btn-info">
	       <span id="span_supervision_get_pymata"></span>
	    </a>
		<br/>
		<br/>
		<a href="javascript:getPinState()" class="btn btn-info">
	       <span id="span_supervision_get_pin_report"></span>
	    </a>
		<INPUT id="pinSpinner" TYPE="NUMBER" MIN="0" MAX="127" STEP="1" VALUE="0" SIZE="3">
		&nbsp
		<span id="span_supervision_get_pin_report_text"></span>
	</div>
	<!-- Polled Data -->
	<div id="tabs-5" class="tab-pane">
		<br/>
		<b><span id="span_supervision_digital_pin"></span></b>
		<INPUT TYPE="NUMBER" id="drPin" MIN="2" MAX="19" STEP="1" VALUE="2" SIZE="1">
		<a href="javascript:digitalRead(this.id)" class="btn btn-info">
	       <span id="span_supervision_read_pin"></span>
	    </a>
		&nbsp
		<input id="ddata" name="pin" class="element text medium" type="text" maxlength="255" value="" style="width: 80px;"/>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

		<b><span id="span_supervision_analog_pin"></span></b>
		<INPUT TYPE="NUMBER" id="arPin" MIN="0" MAX="5" STEP="1" VALUE="0" SIZE="1">
		<a href="javascript:analogRead(this.id)" class="btn btn-info">
	       <span id="span_supervision_read_pin"></span>
	    </a>
		&nbsp
		<input id="adata" name="pin" class="element text medium" type="text" maxlength="255" value="" style="width: 80px;"/>

		<br>
		<br>

		<br>
		<br>
		<b><span id="span_supervision_latch_digital_pin"></span></b>
		<INPUT TYPE="NUMBER" id="dlData" MIN="2" MAX="19" STEP="1" VALUE="2" SIZE="1">
		<a href="javascript:digitalLatchRead(this.id)" class="btn btn-info">
	       <span id="span_supervision_read_pin"></span>
	    </a>
		&nbsp
		<input id="dlatchdata" name="pin" class="element text medium" type="text" maxlength="255" value=""
			   style="width: 500px;"/>

		<br>
		<br>
		<b><span id="span_supervision_latch_analog_pin"></b>
		<INPUT TYPE="NUMBER" id="alData" MIN="0" MAX="5" STEP="1" VALUE="0" SIZE="1">
		<a href="javascript:analogLatchRead(this.id)" class="btn btn-info">
	       <span id="span_supervision_read_pin"></span>
	    </a>
		&nbsp
		<input id="alatchdata" name="pin" class="element text medium" type="text" maxlength="255" value=""
			   style="width: 500px;"/>
		<br>
		<br>
	</div>
	<!-- Servo -->
	<div id="tabs-6" class="tab-pane">
		<br/>
		<b><span id="span_supervision_servo_pin"></span></b>
		<select id="servoPin">
			<option value="3">3</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
		</select>
		&nbsp;&nbsp;&nbsp;
		<b><span id="span_supervision_servo_angle"></span></b></b>
		<input id="servoAngle" name="pin" class="element text medium" type="text" maxlength="4" value="0" style="width: 60px;"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:servo()" class="btn btn-info">
	       <span id="span_supervision_servo_set"></span>
	    </a>
	</div>
	<!-- i2c -->
	<div id="tabs-7" class="tab-pane">
		<br/>
		<b>Default Values Are Set to Read Temperature from </b>
		<a href="https://www.sparkfun.com/products/11931" target="_blank">A Sparkfun TMP102 </a>
		<h2>I2C Config (Use before an I2C read or write)</h2>
		<input id="configI2C" type="button" value="Configure I2C" onclick="i2cConfig();"/>
		<b>Read Delay Time</b>
		<input id="i2cDelayTime" name="pin" class="element text medium" type="text" maxlength="4" value="0"
			   style="width: 120px;"/>


		<h2>I2C Read</h2>
		<b>Device Address</b>
		<input id="i2cReadAddress" name="pin" class="element text medium" type="text" maxlength="4" value="72"
			   style="width: 120px;"/>
		<b>Device Register</b>
		<input id="i2cReadRegister" name="pin" class="element text medium" type="text" maxlength="4" value="0"
			   style="width: 120px;"/>
		<b>Number of Bytes To Read</b>
		<input id="i2cReadNumBytes" name="pin" class="element text medium" type="text" maxlength="4" value="2"
			   style="width: 120px;"/>
		<b>Read Type</b>
		<select id="i2cReadType">
			<option value="I2C_READ">"I2C_READ"</option>
			<option value="I2C_READ_CONTINUOUS" selected>"I2C_READ_CONTINUOUS"</option>
			<option value="I2C_STOP_READING">"I2C_STOP_READING"</option>
		</select>
		<br>
		<br>
		<input id="i2cReadReq" type="button" value="I2C Read" onclick="i2cReadRequest();"/>
		<input id="i2cRequestResult" name="pin" class="element text medium" type="text" maxlength="4" value="0"
			   style="width: 120px;"/>
		&nbsp;&nbsp<b>Celcius</b>
		<input id="i2cRequestResultc" name="pin" class="element text medium" type="text" maxlength="4" value="0"
			   style="width: 120px;"/>
		&nbsp;&nbsp<b>Fahrenheit</b>
		<input id="i2cRequestResultf" name="pin" class="element text medium" type="text" maxlength="4" value="0"
			   style="width: 120px;"/>

		<br> <br>
		<input id="i2cRead" type="button" value="Retrieve Last Read Value" onclick="i2cReadData();"/>
		<input id="i2cReadResult" name="pin" class="element text medium" type="text" maxlength="4" value="0"
			   style="width: 120px;"/>

		<br><br><hr size="6">
		<h1>PyMata IoT</h1>
		<b> Write Data To 8x8 BiColor LED Backpack</b>
		<a href="https://www.adafruit.com/products/902" target="_blank">Adafruit Product ID 109 </a>
		<br><br>
		<input id="i2cWriteTest" type="button" value="First Row On" onclick="i2cWriteDemo(1);"/>
		&nbsp;&nbsp
		<input id="i2cWriteTest" type="button" value="First Row Off" onclick="i2cWriteDemo(0);"/>
	</div>
	<!-- FirmataPlus specific -->
	<div id="tabs-8" class="tab-pane">
		<br/>
		<h2><span id="span_supervision_tone"></span></h2>
		<b><span id="span_supervision_tone_pin"></span></b>
		<select id="tonePin">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
		</select>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<b><span id="span_supervision_tone_freq"></span></b>
		<input id="freq" class="element text medium" type="text" maxlength="4" value="1000" style="width: 60px;"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<b><span id="span_supervision_tone_dur"></span></b>
		<input id="duration" class="element text medium" type="text" maxlength="4" value="100" style="width: 60px;"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:playTone()" class="btn btn-info">
	       <span id="span_supervision_tone_play"></span>
	    </a>
		<br><br>

		<h2><span id="span_supervision_encoder"></span></h2>
		<b><span id="span_supervision_encoder_pinA"></span></b>
		<select id="encoderPinA">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
		</select>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<b><span id="span_supervision_encoder_pinB"></b>
		<select id="encoderPinB">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
		</select>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:encoderRead(0)" class="btn btn-info">
	       <span id="span_supervision_encoder_auto"></span>
	    </a>
		<input id="encoderValue" class="element text medium" type="text" maxlength="4" value="" style="width: 100px;"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:encoderRead(1)" class="btn btn-info">
	       <span id="span_supervision_encoder_manual"></span>
	    </a>
		<input id="encoderValue2" class="element text medium" type="text" maxlength="4" value=""
			   style="width: 100px;"/>
		<br><br>
		<h2><span id="span_supervision_sonar"></span></h2>
		<b><span id="span_supervision_sonar_trig"></span></b>
		<select id="sonarTriggerPin">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
		</select>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<b><span id="span_supervision_sonar_echo"></span></b>
		<select id="sonarEchoPin">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
		</select>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:sonarRead(0)" class="btn btn-info">
	       <span id="span_supervision_sonar_auto"></span>
	    </a>
		<input id="sonarValue" type="text" style="width: 100px;"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:sonarRead(1)" class="btn btn-info">
	       <span id="span_supervision_sonar_manual"></span>
	    </a>
		<input id="sonarValue2" type="text" style="width: 100px;"/>
		<br><br>

		<h2><span id="span_supervision_stepper"></span></h2>
		<b><span id="span_supervision_stepper_pin1"></span></b>
		<select id="stepperPin1">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8" selected>8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
		</select>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<b><span id="span_supervision_stepper_pin2"></span></b>
		<select id="stepperPin2">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9" selected>9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
		</select>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<b><span id="span_supervision_stepper_pin3"></span></b>
		<select id="stepperPin3">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10" selected>10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
		</select>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<b><span id="span_supervision_stepper_pin4"></span></b>
		<select id="stepperPin4">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11" selected>11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
		</select>


		&nbsp
		<b><span id="span_supervision_stepper_steps_rev"></span></b>
		<input id="stepRev" class="element text medium" type="text" maxlength="4" value="180"
			   style="width: 100px;"/>
		<br>
		<br>

		<b><span id="span_supervision_stepper_motor"></span></b>
		<input id="motorSpeed" class="element text medium" type="text" maxlength="4" value="20"
			   style="width: 100px;"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<b><span id="span_supervision_stepper_steps"></span></b>
		<input id="numSteps" class="element text medium" type="text" maxlength="4" value="500" style="width: 100px;"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:runStepMotor()" class="btn btn-info">
	       <span id="span_supervision_stepper_run"></span>
	    </a>
	</div>
	<!-- Requetes -->
	<div id="tabs-9" class="tab-pane">
		<br/>
		<b><span id="span_supervision_HTTP"></span></b>
		<input id="request" class="element text medium" type="text" maxlength="4" style="width: 400px;"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<br/>
		<a href="javascript:HTTPRequest(request)" class="btn btn-info">
	       <span id="span_supervision_HTTP_BT"></span>
	    </a>
	</div>
</div>